<!--
 * @Descripttion:  查询商品成本价明细
 * @version:
 * @Author: cxguo
 * @Date: 2019-08-02 15:03:05
 * @LastEditors: cxguo
 * @LastEditTime: 2020-08-24 15:29:03
 -->
<template>
  <div class="app-container">
    <el-card shadow="never" class="oper-btn-card">
      <el-form
        ref="form"
        class="form-lit5-bottom"
        inline
        :model="searchData"
        label-width="100px"
        size="mini"
      >
        <el-form-item>
          <span>商品编号:{{ skuCode }}</span>
          <span class="margin-l20">商品名称:{{ skuName }}</span>
        </el-form-item>
        <el-form-item label="业务日期:">
          <el-date-picker
            v-model="searchData.businessTime"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
          />
        </el-form-item>
        <el-button type="primary" @click="btnSearch">查询</el-button>
      </el-form>
    </el-card>
    <div>
      <vxe-grid
        ref="table"
        class="grid"
        border
        resizable
        highlight-hover-row
        :loading="tableLoading.stock"
        :edit-config="{trigger: 'click', mode: 'row'}"
        :columns="columnsData"
        :data="tableData.stock"
      />
    </div>
    <div class="pagination-container">
      <el-pagination
        background
        layout="total, sizes,prev, pager, next,jumper"
        :page-size="pageInfo.rows"
        :page-sizes="[20,30,40]"
        :current-page.sync="pageInfo.page"
        :total="pageInfo.total"
        @size-change="onSizeChange"
        @current-change="onCurrentChange"
      />
    </div>
  </div>
</template>
<script>
import { oftenuse } from '@/libs/mixins'
import { listDataBySku } from '@/api/goods/costprice-log.js'
import Affix from '@/components/Affix'

export default {
  name: 'CostPriceLogList',
  filters: {
  },
  // eslint-disable-next-line vue/no-unused-components
  components: { Affix },
  mixins: [oftenuse],
  props: {
    skuId: {
      type: String,
      default: null
    },
    skuCode: {
      type: String,
      default: null
    },
    skuName: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      searchData: {},
      stockInfo: {
        oper: 'add',
        data: {}
      },
      dialogVisible: false,
      optionsData: {},

      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      columnsData: [
        { field: 'billCatName', title: '业务类型', width: 100 },
        { field: 'billNo', title: '业务单号', width: 150 },
        { field: 'businessTime', title: '业务日期', showOverflow: true, width: 120 },
        { field: 'stockIn', title: '入库信息', width: 300,
          children: [
            { field: 'quantity', title: '数量', align: 'right', width: 100,
              slots: {
                default: (params) => {
                  const { direction, quantity } = params.row
                  if (direction === '1') {
                    return [<span>{quantity}</span>]
                  }
                }
              }
            },
            { field: 'priceCost', title: '单价成本', align: 'right', width: 100,
              slots: {
                default: (params) => {
                  const { direction, priceCost } = params.row
                  if (direction === '1') {
                    const val = this.$amount(priceCost).format()
                    return [<span>{val}</span>]
                  }
                }
              }
            },
            { field: 'priceTotal', title: '总额成本', align: 'right', width: 100,
              slots: {
                default: (params) => {
                  const { direction, priceCost, quantity } = params.row
                  if (direction === '1') {
                    const priceTotal = this.$amount(quantity).multiply(priceCost).format()
                    return [<span>{priceTotal}</span>]
                  }
                }
              }
            }
          ]
        },
        { field: 'stockOut', title: '出库信息', width: 300,
          children: [
            { field: 'quantity', title: '数量', align: 'right', width: 100,
              slots: {
                default: (params) => {
                  const { direction, quantity } = params.row
                  if (direction === '0') {
                    return [<span>{quantity}</span>]
                  }
                }
              }},
            { field: 'priceCost', title: '单价成本', align: 'right', width: 100,
              slots: {
                default: (params) => {
                  const { direction, priceCost } = params.row
                  if (direction === '0') {
                    const val = this.$amount(priceCost).format()
                    return [<span>{val}</span>]
                  }
                }
              }
            },
            { field: 'priceTotal', title: '总额成本', align: 'right', width: 100,
              slots: {
                default: (params) => {
                  const { direction, priceCost, quantity } = params.row
                  if (direction === '0') {
                    const priceTotal = this.$amount(quantity).multiply(priceCost).format()
                    return [<span>{priceTotal}</span>]
                  }
                }
              }
            }
          ]
        },
        { field: 'remain', title: '结余信息', width: 300,
          children: [
            { field: 'remainQty', title: '数量', align: 'right', width: 100,
              slots: {
                default: (params) => {
                  const { remainQty, originQuantity } = params.row
                  const value = this.$amount(remainQty).add(originQuantity).format()
                  return [<span>{value}</span>]
                }
              }
            },
            { field: 'remainPriceCost', title: '单价成本', align: 'right', width: 100 },
            { field: 'remainPriceTotal', title: '总额成本', align: 'right', width: 100,
              slots: {
                default: (params) => {
                  const { remainQty, remainPriceCost } = params.row
                  const value = this.$amount(remainQty).multiply(remainPriceCost).format()
                  return [value]
                }
              }
            }
          ]
        }
      ]
    }
  },
  watch: {
  },
  created() {
    this.listDataBySku()
  },
  methods: {
    btnSearch() {
      this.setBtnLoading('search', true)
      this.listDataBySku().then(res => {
        this.setBtnLoading('search', false)
      }).catch(err => {
        console.log(err)
        this.setBtnLoading('search', false)
      })
    },
    btnMore(params) {
      const { row } = params
      const { id, name } = row
      this.$router.push({
        name: 'StockLogList',
        query: { id, name }
      })
    },
    // table btns
    // api
    listDataBySku(params = { data: this.searchData, page: this.pageInfo }) {
      params.data = Object.assign(this.searchData, { skuId: this.skuId })
      this.setTableLoading('stock', true)
      return new Promise((resolve, reject) => {
        listDataBySku(params).then(res => {
          this.setTableLoading('stock', false)
          this.setTableData('stock', res.data.records)
          this.pageInfo.total = res.data.total
          resolve(res)
        }).catch(err => {
          this.setTableLoading('stock', false)
          this.$notify.error({ title: '查询异常！', message: err.message })
          reject(err)
        })
      })
    },
    getPriceByPriceJson(basePriceStr) {
      const basePrice = JSON.parse(basePriceStr)
      const key = Object.keys(basePrice)[0]
      const value = basePrice[key]
      return value
    },
    // on
    onSelectionChange(selectionData) {
      this.setTableSelectionData('stock', selectionData)
    },
    onSizeChange(val) {
      this.pageInfo.current = 1
      this.pageInfo.size = val
      this.listDataBySku()
    },
    onSwitchStatusChange(params, val) {
      const { row } = params
      this.updatestock(row).then(res => {
        if (res.data.flag) {
          this.$set(row, 'status', val)
        }
      })
    },
    onEditClosed(params, val) {
      const { row } = params
      this.updatestock(row).then(res => {
        if (res.data.flag) {
          // this.$set(row, 'status', val)
        }
      })
    },
    onCurrentChange(val) {
      this.pageInfo.current = val
      this.listDataBySku()
    }
  }
}
</script>
<style scoped>

</style>
